<!-- html -->
<template>
  <span class="span2">num1：{{ num1 }}，num2：{{ num2 }}，num3：{{ num3 }}, bigNum1：{{ bigNum1 }}</span>
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="changeNum2">修改num2</button>
  <button class="button1" @click="changeNum3">修改num3</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'piniaTest1Children'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useNumStore } from '@/assets/store/num'
//数据
let numStore = useNumStore()
console.log('numStore：', numStore)
console.log('toRefs：', toRefs(numStore))
console.log('storeToRefs', storeToRefs(numStore))
let { num1, num2, num3, bigNum1 } = storeToRefs(numStore)
//方法
function changeNum1() {
  numStore.num1 += 1
}
function changeNum2() {
  numStore.$patch({
    num2: numStore.num2 += 1
  })
}
function changeNum3() {
  numStore.changeNum3(1)
}
//监视pinia
numStore.$subscribe((mutate, state) => {
  console.log('numStore保存数据变化，mutate：', mutate, '，state：', state)
  //浏览器本地存储
  localStorage.setItem('nums', JSON.stringify({ 'num1': state.num1, 'num2': state.num2, 'num3': state.num3 }))
})
</script>

<!-- 样式 -->
<style scoped></style>